<template>
	<div>
		<div class="carEditorSubmit">
			<button type="submit" form="formReserve">确定</button>
		</div>
		<div class="page has-navbar has-tabbar" v-nav="{title: '销售出库', showBackButton: true}">
			<div class="page-content padding-top reserve-margin">
				<div class="car-editor" ref="carEditor">
					<div class="reserve">
						<form id="formReserve" @submit.prevent="submit">
						<ul>
							<li>
								<div class="car-editor-title">
									销售信息
								</div>
								<list>
									<item>
										<!---->
										<div class="car-enitor-tr active" @click="saleSaleTypeFn">
											<div class="car-editor-name">销售类型</div>
											<div class="car-editor-input">{{getJson.params.saleType | filterOrderSaleType}}<span v-if="!getJson.params.saleType" class="placeholder">请选择销售类型</span></div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr active">
											<div class="car-editor-name">成交日期</div>
											<div class="car-editor-input"><input type="date" required v-model="getJson.params.saleDealDate" /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr active" @click="saleDealUserIdFn">
											<div class="car-editor-name">成交员工</div>
											<div class="car-editor-input">
												<input type="text" v-model="getJson.getParams.saleDealUserId.value" readonly placeholder="请选择成交员工" />
											</div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr active">
											<div class="car-editor-name">成交价格</div>
											<div class="car-editor-input"><input type="number" required step="0.01" min="0.01" max="9999.99" placeholder="请填写成交价格" v-model="getJson.params.salePrice" /></div>
											<div class="car-editor-right">万元</div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">定金</div>
											<div class="car-editor-input"><input type="number" step="0.01" min="0.01" max="9999.99" placeholder="请填写定金" v-model="getJson.params.saleDeposit" /></div>
											<div class="car-editor-right">万元</div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">备注</div>
											<div class="car-editor-input"><input type="text" placeholder="请填写备注" v-model="getJson.params.saleRemark" /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>
								</list>
							</li>
							<li>
								<div class="car-editor-title">
									付款类型
								</div>
								<list>
									<item>
										<div class="car-enitor-tr" @click="salePayTypeFn">
											<div class="car-editor-name">付款类型</div>
											<div class="car-editor-input">{{getJson.params.salePayType | filterSalePayType}}
												<span v-if="!getJson.params.salePayType" class="placeholder">请选择付款类型</span>
											</div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==1">
										<div class="car-enitor-tr">
											<div class="car-editor-name">定金</div>
											<div class="car-editor-input"><input type="number" placeholder="请填写定金" step="0.01" min="0.01" max="99999.99" v-model="getJson.params.saleDeposit" /></div>
											<div class="car-editor-right">元</div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==1">
										<div class="car-enitor-tr">
											<div class="car-editor-name">余款</div>
											<div class="car-editor-input"><input type="number" placeholder="请填写余款" step="0.01" min="0.01" max="99999.99" v-model="getJson.params.saleBalance" /></div>
											<div class="car-editor-right">元</div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==2">
										<div class="car-enitor-tr" @click="saleMortgageNameFn">
											<div class="car-editor-name">按揭公司</div>
											<div class="car-editor-input">{{getJson.getParams.saleMortgageName.value}}
												<span v-if="!getJson.getParams.saleMortgageName.value" class="placeholder">请选择按揭公司</span>
											</div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==2">
										<div class="car-enitor-tr">
											<div class="car-editor-name">首付款</div>
											<div class="car-editor-input"><input type="number" placeholder="请填写金额" step="0.01" min="0.01" max="99999.99" v-model="getJson.params.saleFirstPayment" /></div>
											<div class="car-editor-right">万元</div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==2">
										<div class="car-enitor-tr">
											<div class="car-editor-name">贷款额度</div> 
											<div class="car-editor-input"><input type="number" placeholder="请填写金额" step="0.01" min="0.01" max="99999.99" v-model="getJson.params.saleLoanLimit" /></div>
											<div class="car-editor-right">万元</div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==2">
										<div class="car-enitor-tr">
											<div class="car-editor-name">按揭周期</div>
											<div class="car-editor-input"><input type="number" placeholder="请填写周期" min="1" step="1" max="99999" v-model="getJson.params.saleMortgageCycle" /></div>
											<div class="car-editor-right">期</div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==2">
										<div class="car-enitor-tr">
											<div class="car-editor-name">按揭费用</div>
											<div class="car-editor-input"><input type="number" placeholder="请填写金额" step="0.01" min="0.01" max="99999.99" v-model="getJson.params.saleMortgagePrice" /></div>
											<div class="car-editor-right">元</div>
										</div>
									</item>
									<item v-if="getJson.params.salePayType==2">
										<div class="car-enitor-tr">
											<div class="car-editor-name">押金</div>
											<div class="car-editor-input"><input type="number" placeholder="请填写金额" step="0.01" min="0.01" max="99999.99" v-model="getJson.params.saleMortgageDeposit" /></div>
											<div class="car-editor-right">元</div>
										</div>
									</item>
								</list>
							</li>
							<li>
								<div class="car-editor-title">
									相关费用
								</div>
								<list>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">过户费用</div>
											<div class="car-editor-input"><input type="number" step="0.01" placeholder="请填写金额" max="99999.99" min="0.01" v-model="getJson.params.saleTransferFee" /></div>
											<div class="car-editor-right">元</i>
											</div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">佣金</div>
											<div class="car-editor-input"><input type="number" step="0.01" min="0.01" max="99999.99" placeholder="请填写金额" v-model="getJson.params.saleCommission" /></div>
											<div class="car-editor-right">元</i>
											</div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">开票费用</div>
											<div class="car-editor-input"><input type="number" step="0.01" min="0.01" max="99999.99" placeholder="请填写金额" v-model="getJson.params.saleBillPrice" /></div>
											<div class="car-editor-right">元</i>
											</div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">其他费用</div>
											<div class="car-editor-input"><input type="number" step="0.01" min="0.01" max="99999.99" placeholder="请填写金额" v-model="getJson.params.saleOtherPrice" /></div>
											<div class="car-editor-right">元</i>
											</div>
										</div>
									</item>
								</list>
							</li>
							<li>
								<div class="car-editor-title">
									客户信息
								</div>
								<list>
									<!--<item>
										<div class="car-enitor-tr active">
											<div class="car-editor-name">联系电话</div>
											<div class="car-editor-input"><input type="number" required placeholder="请录入电话" v-model="getJson.params.saleBuyerMobile" /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr active">
											<div class="car-editor-name">客户名称</div>
											<div class="car-editor-input"><input type="text" required pattern="{0,20}" placeholder="最多支持录入20个字符" v-model="getJson.params.saleBuyerName" /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>-->
									<item>
										<div class="car-enitor-tr" @click="channelIdFn">
											<div class="car-editor-name">客户来源</div>
											<div class="car-editor-input">
												<input type="text" v-model="getJson.getParams.channelId.value" readonly placeholder="请选择客户来源" />
											</div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr" @click="provinceIdFn">
											<div class="car-editor-name">归属地</div>
											<div class="car-editor-input">{{getJson.getParams.provinceId.value}} {{getJson.getParams.cityId.value}}<span v-if="!getJson.getParams.cityId.value" class="placeholder">请选择归属地(省)(市)</span></div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">证件号</div>
											<div class="car-editor-input"><input type="tel" placeholder="请填写证件号" maxlength="18" v-model="getJson.params.saleBuyerCardNo" /></div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
								</list>
							</li>
							<li>
								<div class="car-editor-title">
									保险信息
								</div>
								<list>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">是否代办保险</div>
											<div class="car-editor-input"></div>
											<div class="car-editor-right">
												<div class="item item-borderless item-toggle von-toggle">
													<label class="toggle toggle-balanced">
											            <input type="checkbox" v-model="orderInsuranceState">
											            <div class="track">
											            	<div class="handle"></div>
											            </div>
											        </label>
												</div>
											</div>
										</div>
									</item>
								</list>
								<div v-if="orderInsuranceState">
									<list>
										<item>
											<div class="car-enitor-tr" @click="saleInsuranceCompanyFn">
												<div class="car-editor-name">保险公司</div>
												<div class="car-editor-input"><input type="text" v-model="getJson.getParams.saleInsuranceCompany.value" readonly placeholder="请选择保险公司" /></div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr">
												<div class="car-editor-name">商业险</div>
												<div class="car-editor-input"><input type="text" v-model="getJson.params.saleBusinessInsurPrice" placeholder="请输入金额" step="0.01" min="0.01" max="99999.99" /></div>
												<div class="car-editor-right">元</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr">
												<div class="car-editor-name">交强险</div>
												<div class="car-editor-input"><input type="text" v-model="getJson.params.saleForceInsurPrice" placeholder="请输入金额" step="0.01" min="0.01" max="99999.99" /></div>
												<div class="car-editor-right">元</div>
											</div>
										</item>
									</list>
								</div>
							</li>
						</ul>
						</form>
					</div>
				</div>
			</div>
		</div>
		<transition name="bottom" v-for="(item,index) in getJson.paramsIs">
			<keep-alive>
				<modal :paramsIs="getJson.paramsIs" :itemIndex="index" />
			</keep-alive>
		</transition>
	</div>
</template>

<script>
	import { bus } from 'bus.js'
	import modal from 'src/assembly/modalList.vue'
	
	export default {
		data() {
			return {
				getJson: {
					params: {
						//车辆id
						carId:undefined,
						//销售类型
						saleType:undefined,
						//成交日期
						saleDealDate: undefined,
						//成交员工
						saleDealUserId: undefined,
						//成交价格
						salePrice: undefined,
						//定金
						saleDeposit: undefined,
						//备注
						saleRemark:undefined,
						//付款类型
						salePayType:undefined,
						//定金
						saleDeposit:undefined,
						//过户费用
						saleTransferFee:undefined,
						//佣金
						saleCommission:undefined,
						//开票费用
						saleBillPrice:undefined,
						//其他费用
						saleOtherPrice:undefined,
						//余款
						saleBalance:undefined,
						//联系电话
						saleBuyerMobile:undefined,
						//客户名称
						saleBuyerName:undefined,
						//客户来源
						channelId: undefined,
						//归属地 （省）
						provinceId:undefined,
						//归属地 （市）
						cityId: undefined,
						//证件号
						saleBuyerCardNo:undefined,
						//保险信息
						saleInsuranceState:0,
						//保险公司
						saleInsuranceCompany:undefined,
						//商业险
						saleBusinessInsurPrice:undefined,
						//交强险
						saleForceInsurPrice:undefined,
						//付款类型
						salePayType:undefined,
						//按揭公司
						saleMortgageName:undefined,
						//按揭首付款
						saleFirstPayment:undefined,
						//按揭周期
						saleMortgageCycle:undefined,
						//按揭费用
						saleMortgagePrice:undefined,
						//按揭额度
						saleLoanLimit:undefined,
						//按揭押金
						saleMortgageDeposit:undefined,
						//用户id
						userId:sess.get('userSession').userId,
					},
					getParams: {
						saleSaleType: {
							value: '',
						},
						saleDealUserId: {
							value: ''
						},
						channelId: {
							value: ''
						},
						provinceId: {
							value: ''
						},
						cityId: {
							value: ''
						},
						salePayType: {
							value: ''
						},
						saleInsuranceCompany: {
							value: ''
						},
						saleMortgageName:{
							value:''
						}
					},
					paramsIs: []
				},
				saleInsuranceState: false,
				orderInsuranceState:false,
			}
		},
		components: {
			modal
		},
		methods: {
			dateInit() {
				this.queryRouter()
				var time = new Date()
				var n = time.getFullYear().toString()
				var y = time.getMonth()
				var r = time.getDate()
				y++
				y = y < 10 ? '0' + y : y
				r = r < 10 ? '0' + r : r
				return n + '-' + y + '-' + r
			},
			busOn() {
				bus.$off('saleSaleType')
				bus.$off('saleDealUserId')
				bus.$off('provinceId')
				bus.$off('cityId')
				bus.$off('channelId')
				bus.$off('saleInsuranceCompany')
				bus.$off('salePayType')
				bus.$off('saleMortgageName')
				bus.$on('saleSaleType', (index) => {
					this.getJson.params.saleType = this.getJson.paramsIs[0].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('saleDealUserId', (index) => {
					this.getJson.getParams.saleDealUserId.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.params.saleDealUserId = this.getJson.paramsIs[0].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('provinceId', (index) => {
					this.getJson.getParams.provinceId.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.params.provinceId = this.getJson.paramsIs[0].list[index].id
					this.getJson.getParams.cityId.value = ''
					this.getJson.params.cityId = ''
					window.axios.get(baseUrl + '/controller/area/city', {
						params: {
							provinceId: this.getJson.params.provinceId
						}
					}).then((res) => {
						this.getJson.paramsIs.push({
							list: [],
							title: '归属地(市)',
							emit: 'cityId',
						})
						for(let item of res.data.result) {
							this.getJson.paramsIs[1].list.push({
								name: item.cityName,
								id: item.cityId
							})
						}
					})
				})
				bus.$on('cityId', (index) => {
					this.getJson.getParams.cityId.value = this.getJson.paramsIs[1].list[index].name
					this.getJson.params.cityId = this.getJson.paramsIs[1].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('channelId', (index) => {
					this.getJson.getParams.channelId.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.params.channelId = this.getJson.paramsIs[0].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('saleInsuranceCompany', (index) => {
					this.getJson.params.saleInsuranceCompany = this.getJson.paramsIs[0].list[index].id
					this.getJson.getParams.saleInsuranceCompany.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.paramsIs = []
				})
				bus.$on('salePayType', (index) => {
					this.getJson.params.salePayType = this.getJson.paramsIs[0].list[index].id
					this.getJson.getParams.salePayType.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.paramsIs = []
				})
				
				bus.$on('saleMortgageName', (index) => {
					this.getJson.params.saleMortgageName = this.getJson.paramsIs[0].list[index].id
					this.getJson.getParams.saleMortgageName.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.paramsIs = []
				})
			},
			//按揭公司
			saleMortgageNameFn(){
				
				window.axios.get(baseUrl + '/crm-web/controller/sysParam/mortgage-list', {params: {marketId: sess.get('userSession').marketId}}).then((res) => {
					this.getJson.paramsIs.push({
						list: [],
						title: '按揭公司',
						emit: 'saleMortgageName',
					})

					this.getJson.paramsIs[0].list = res.data.result.map(item => ({name: item.mortgageName, id: item.mortgageId}))
				})
			},
			// 销售类型	
			saleSaleTypeFn() {
				this.getJson.paramsIs.push({
					list: [{
						name: '批发',
						id: '1'
					}, {
						name: '直销',
						id: '2'
					}, {
						name: '拍卖',
						id: '3'
					}], //1：批发、2：直销、3：拍卖
					title: '销售类型',
					emit: 'saleSaleType',
				})
//				console.log(this.getJson.paramsIs)

			},
			// 成交人员
			saleDealUserIdFn() {

				window.axios.get(baseUrl + '/controller/getUserList', {
					params: {
						shopId: this.userSession.shopId ? this.userSession.shopId : ''
					}
				}).then((res) => {
					this.getJson.paramsIs.push({
						list: [],
						title: '成交人员',
						emit: 'saleDealUserId',
					})
					for(let item of res.data.result) {
						this.getJson.paramsIs[0].list.push({
							name: item.userName,
							id: item.userId
						})
					}
				})

			},
			//客户来源
			channelIdFn() {
				window.axios.get(baseUrl + '/crm-web/controller/sysParam/channel-list', {params:{marketId:sess.get('userSession').marketId,channelState:1, shopId: sess.get('userSession').shopId}}).then((res) => {
					this.getJson.paramsIs.push({
						list: [],
						title: '客户来源',
						emit: 'channelId',
					})
					for(let item of res.data.result) {
						this.getJson.paramsIs[0].list.push({
							name: item.channelName,
							id: item.channelId
						})
					}
				})
			},

			//归属地
			provinceIdFn() {
				window.axios.get(baseUrl + '/controller/area/province').then((res) => {
					this.getJson.paramsIs.push({
						list: [],
						title: '归属地(省)',
						emit: 'provinceId',
					})
					for(let item of res.data.result) {
						this.getJson.paramsIs[0].list.push({
							name: item.provinceName,
							id: item.provinceId
						})
					}
				})
			},
			// 保险公司
			saleInsuranceCompanyFn() {
				window.axios.get(baseUrl + '/crm-web/controller/sysParam/insurance-list').then((res) => {
					console.log(res)
					this.getJson.paramsIs.push({
						list: [],
						title: '保险公司',
						emit: 'saleInsuranceCompany',
					})					
					
					this.getJson.paramsIs[0].list = res.data.result.map(item => ({name: item.insuranceName, id: item.insuranceId}))
				})
			},
			//付款类型
			salePayTypeFn() {
				this.getJson.paramsIs.push({
					list: [{
						name: '现款',
						id: '1'
					}, {
						name: '按揭',
						id: '2'
					}], //1：现款、2：按揭
					title: '付款类型',
					emit: 'salePayType',
				})
			},
			submit() {
				if(!(this.getJson.params.saleType)){
					$toast.show('请选择销售类型', 2000)
					return
				}
				if(!(this.getJson.getParams.saleDealUserId.value)){
					$toast.show('请选择成交员工', 2000)
					return
				}
//				if(!(this.getJson.params.salePayType)){
//					$toast.show('请选择付款类型', 2000)
//					return
//				}
//				if(this.getJson.params.salePayType==2&&!(this.getJson.getParams.saleMortgageName.value)){
//					$toast.show('请选择按揭公司', 2000)
//					return
//				}
//				if(!(this.getJson.getParams.channelId.value)){
//					$toast.show('请选择客户来源', 2000)
//					return
//				}
//				if(this.orderInsuranceState&&!(this.getJson.getParams.saleInsuranceCompany.value)){
//					$toast.show('请选择保险公司', 2000)
//					return
//				}
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否提交',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '提交'
				}).then((res) => {
					if(res) {
						// console.log(this.getJson.params)
						window.axios.get(baseUrl + '/controller/insertCarSale', {
							params: this.getJson.params
						}).then((res) => {
//							console.log(res)
							if(res){
								setTimeout(()=>{
									$toast.show('提交成功', 2000)
									setTimeout(()=>{
										this.$router.go(-1)
									},2000)
								},400)
							}
						})
					}
				})
			},
			queryRouter() {
				this.getJson.params.carId = this.$route.query.params.carId
			},
			userIs() {
				if(!(this.userSession)) {
					$toast.show('请登录', 2000).then(() => {

					})
					setTimeout(() => {
						this.$router.push({
							path: '/'
						})
					}, 1000)

				}
				//			console.log(this.$router)
				if(!(this.$route.query.params.carId)) {
					$toast.show('获取失败', 2000).then(() => {

					})
					setTimeout(() => {
						this.$router.go(-1)
					}, 1000)

				}
			}
		},
		watch: {			
			'orderInsuranceState': function() {

				this.getJson.params.saleInsuranceState = this.orderInsuranceState ? '1' : '0'

				if(this.orderInsuranceState) {
					this.$nextTick(() => {
						this.$refs.carEditor.scrollTop = this.$refs.carEditor.scrollTop + 190
					})
				}
			}
		},
		mounted() {
			this.busOn()
			this.queryRouter()
			this.getJson.params.saleDealDate = this.dateInit()
			this.userIs()
		},
		computed: {
			// 获取tab标签dom
			userSession() {
				return sess.get('userSession')
			}
		},

	}
</script>